import styled from 'styled-components';
import React, { CSSProperties, ReactNode, useCallback, useEffect, useState } from 'react';
import { Button, Select } from 'antd';
import {
    ProFormText,
    ProFormSelect,
    ProFormTextArea,
    ProFormGroup,
    ProFormItem
} from '@ant-design/pro-components';
import { ConnectorDataSource } from '../../services';

import { DatabaseInput } from './database-input';

const STORAGE_TYPES = [{
    identifier: 'mysql',
    name: 'MySQL',
}, {
    identifier: 'sqlite',
    name: 'SQLite',
}]

export interface ProFormDataStorageInputProps {
    name: string;
    label: string;
}

export const ProFormDataStorageInput: React.FC<ProFormDataStorageInputProps> = (props) => {

    return (
        <ProFormItem label={props.label} shouldUpdate>
            {(form) => {
                return (
                    <>
                        <Select
                            style={{ flex: 1 }}
                            value={form.getFieldValue(props.name)?.storageType}
                            onChange={(value) => {
                                console.log(value, form.getFieldValue(props.name));
                                let storage = form.getFieldValue(props.name);
                                if (storage.options && storage.options != '') {
                                    try {
                                        let ds = JSON.parse(storage.options);
                                        ds.database_type = value;
                                        ds.protocol = value;
                                        storage.options = JSON.stringify(ds);
                                    } catch (error) {
                                    }
                                }
                                storage.storageType = value;
                                form?.setFieldValue(props.name, storage)
                            }}
                            options={STORAGE_TYPES.map((item, index) => {
                                return {
                                    value: item.identifier,
                                    label: item.name
                                };
                            })} />
                        <label>数据源设置</label>
                        <OptionContainer>
                            <DatabaseInput
                                hideTypeSelect={true}
                                value={form.getFieldValue(props.name)?.options}
                                onChange={async (value) => {
                                    console.log(value, form.getFieldValue(props.name));
                                    form?.setFieldValue(
                                        props.name,
                                        {
                                            ...form.getFieldValue(props.name),
                                            options: value
                                        },
                                    )
                                }}
                            ></DatabaseInput>
                        </OptionContainer >
                    </>
                );
            }}
        </ProFormItem >
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const OptionContainer = styled.div`
    width: 100%;
    padding:0 10px;
    margin:0 auto;
`;